import React, { useState, useEffect } from 'react'
import { Button, Icon } from '@alifd/next'
import { translate } from '@/utils/tools'
import store from '@/store'
import { useMemoizedFn } from 'ahooks'

import styles from './index.module.scss'

const BIMTitleDom = ({ name, id, addBIM, deleteBIMs }) => {
  const [graphState] = store.useModel('graph')
  const { userType } = graphState

  const [label, setLabel] = useState('')

  useEffect(() => setLabel(translate(name || id)), [name, id])

  // const createTooltip = useMemoizedFn((dom, text) => (
  //   <Balloon
  //     type={'normal'}
  //     trigger={dom}
  //     align="t"
  //     alignEdge
  //     delay={150}
  //     closable={false}
  //     offset={[8, 0]}
  //     needAdjust
  //     followTrigger
  //     children={text}
  //     shouldUpdatePosition
  //     popupClassName={styles.tooltip}
  //   />
  // ))

  const createTooltip = useMemoizedFn((dom, text) => dom)

  const props = {
    className: styles.button,
    ghost: 'dark',
    type: 'normal',
    text: true
    // style: { display: !getButtonState() ? 'none' : undefined }
  }

  return (
    <div className={styles.BIMTitleDom}>
      <div style={{ width: 'auto' }}>{label}</div>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      {userType === 'staff' ? (
        <>
          {createTooltip(
            <Button {...props} onClick={addBIM}>
              <Icon className={styles.icon} type="add" />
            </Button>,
            `添加${label}`
          )}
          &nbsp;&nbsp;
          {createTooltip(
            <Button {...props} onClick={deleteBIMs}>
              <Icon className={styles.icon} type="ashbin" />
            </Button>,
            `删除${label}`
          )}
          {/* &nbsp;&nbsp;
          {createTooltip(
            <Button {...props} onClick={() => query()}>
              <Icon className={styles.icon} type="chart-pie" />
            </Button>,
            `自动查找${label}`
          )} */}
        </>
      ) : null}
    </div>
  )
}

export default BIMTitleDom
